<template>
  <!-- 有且只能有一个 根标签 -->
  <div>
    <div>
      <!-- vue指令 -->
      <!-- 修饰符 指令的扩展功能 -->
      <!-- 比如v-model.number  只能输入数字 自动去除非数字 （将输入的字符串转为有效的数字类型）-->
      <!-- v-model.trim  去除首尾空格-->
      <!-- v-model.lazy  从oninput效果 变为 onchange效果 -->
      <!-- v-model 可以实现双向绑定 多用于表单元素 -->
    </div>
    <!-- <input type="text" v-model.number="val" /> -->
    <!-- <input type="number" v-model.number="val" /> -->
    <!-- <input type="text" v-model.trim="val" /> -->
    <input type="text" v-model.lazy="val" />
    <input type="checkbox" v-model="flag" />
    <!-- 这里的变量必须在data中定义出来 -->
    <h2>{{ val }}</h2>
    <h2>{{ flag }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "123",
      val: null,
      flag: false,
    };
  },
};
</script>

<style>
</style>